<template>
  <div>
    <div class="wangEditor_up">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 第一类   柱状图 -->
        <el-tab-pane label="柱状图" name="1">
          <div v-if="activeNum == 1">
            <div class="describe">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>
                  1、eCharts的动画效果使用的是外置js,需要引入，全局引入在main.js，局部引入就在组件中引入
                </li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item">
                <bar-graph></bar-graph>
                <p class="path">
                  路径：src\view\echarts\components\bar\graph.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <bar-threed></bar-threed>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\barThreed.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <hengBar></hengBar>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\hengBar.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <morecolor></morecolor>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\morecolor.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <shock></shock>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\shock.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <more-bar></more-bar>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\moreBar.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <hierarchy></hierarchy>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\bar\hierarchy.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <fxpm></fxpm>
                </div>
                <p class="path">
                  路径：src\view\echarts/components/line/fxpm.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                 <gradpeopleDimen />
                </div>
                <p class="path">
                  路径：src\view\echarts/components/bar/gradpeopleDimen.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <barumbel></barumbel>
                </div>
                <p class="path">路径：src\view\echarts/components/bar/barumbel.vue</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <barHet></barHet>
                </div>
                <p class="path">路径：src\view\echarts/components/bar/barHet.vue</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 第二类  水球 -->
        <el-tab-pane label="水球" name="2">
          <div v-if="activeNum == 2">
            <div class="describe">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>
                  1、水球的动画使用的是插件："echarts-liquidfill": "^3.1.0"
                </li>
                <li>
                  2、使用的插件版本是3，配对的echarts是："echarts": "^5.3.1",
                </li>
                <li>3、画面不出来的可能原因是版本不配对问题</li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item water_item">
                <div class="echarts_box">
                  <no-border></no-border>
                </div>
                <p class="path">
                  路径：src\view\echarts\components \water\noBorder.vue
                </p>
              </div>
              <div class="list_item water_item">
                <div class="echarts_box">
                  <waterthr></waterthr>
                </div>
                <p class="path">
                  路径：src\view\echarts\components \water\waterthr.vue
                </p>
              </div>
              <div class="list_item water_item">
                <div class="echarts_box">
                  <waterfour></waterfour>
                </div>
                <p class="path">
                  路径：src\view\echarts\components \water\waterfour.vue
                </p>
              </div>
              <div class="list_item water_item">
                <div class="echarts_box">
                  <waterfive></waterfive>
                </div>
                <p class="path">
                  路径：src\view\echarts\components \water\waterfive.vue
                </p>
              </div>
              <div class="list_item water_item">
                <div class="echarts_box">
                  <watersix></watersix>
                </div>
                <p class="path">
                  路径：src\view\echarts\components \water\watersix.vue
                </p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 第三类   饼图 -->
        <el-tab-pane label="饼图" name="3">
          <div v-if="activeNum == 3">
            <div class="describe" v-if="activeNum == 3">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>
                  1、eCharts的动画效果使用的是外置js,需要引入，全局引入在main.js，局部引入就在组件中引入
                </li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item">
                <div class="echarts_box">
                  <pie-left></pie-left>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\PieChart.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <v-ring></v-ring>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\ring.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <pie-rose></pie-rose>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\pieRose.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <lian-bian></lian-bian>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\lianBian.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <statusbar></statusbar>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\statusbar.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <gjsthr></gjsthr>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\gjsthr.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <gjsthrdouble></gjsthrdouble>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\pie\gjsthrdouble.vue
                </p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 第四类  地图 -->
        <el-tab-pane label="地图" name="4">
          <div v-if="activeNum == 4">
            <div class="describe">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>1、地图中包含了echarts的地图组件，也有百度地图的组件</li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item">
                <div class="echarts_box">
                  <city-map></city-map>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\map\cityMap.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <china-map></china-map>
                </div>
                <p class="path">
                  路径：src\view\echarts\components\map\chinaMap.vue
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <img
                    src="../../assets/img/1.jpg"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="path">
                  view\echarts\components\map\mapLine.vue( 路由:/map )
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <img
                    src="../../assets/img/3d.png"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="path">
                  view\echarts\components\map\threeDmap.vue( 路由:/3dmap )
                </p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <img
                    src="../../assets/img/mapcard_bj.png"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="path">
                  view\echarts\components\map\threeDmap.vue( 路由:/mapcard )
                </p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 第五类  线条 -->
        <el-tab-pane label="折线" name="5">
          <div v-if="activeNum == 5">
            <div class="describe">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>1、折线包括折线、曲线、曲线面积图等</li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item">
                <div class="echarts_box">
                  <linemore></linemore>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <crack></crack>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <lineone></lineone>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <linetwo></linetwo>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <linethree></linethree>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <fxpg></fxpg>
                </div>
                <p class="path">路径：</p>
              </div>
              <div class="list_item">
                <div class="echarts_box">
                  <lineChart></lineChart>>
                </div>
                <p class="path">路径：</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 第六类   仪表盘 -->
        <el-tab-pane label="仪表盘" name="6">
          <div v-if="activeNum == 6">
            <div class="describe">
              <div class="describe_title">说明：</div>
              <ul class="describe_item">
                <li>1、自定义仪表盘背景（echarts版本不低于5.0.0）</li>
              </ul>
            </div>
            <div class="list_box">
              <div class="list_item">
                <div class="echarts_box">
                  <customBackground></customBackground>
                </div>
                <p class="path">
                  路径:
                  view\echarts\components\instrumentPanel\customBackground.vue
                </p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="wangEditor_down">
      <router-view />
    </div> -->
  </div>
</template>
<script>
import barGraph from "./components/bar/graph.vue";
import morecolor from "./components/bar/morecolor.vue";
import barThreed from "./components/bar/barThreed.vue";
import hengBar from "./components/bar/hengBar.vue";
import gjsbar from "./components/bar/gjsbar.vue";
import gjsfxyj from "./components/bar/gjsfxyj.vue";
import gjsbarzx from "./components/bar/gjsbarzx.vue";
import noBorder from "./components/water/noBorder.vue";
import pieLeft from "./components/pie/PieChart.vue";
import gjsthr from "./components/pie/gjsthr.vue";
import gjsthrdouble from "./components/pie/gjsthrdouble.vue";
import pieRose from "./components/pie/pieRose.vue";
import statusbar from "./components/pie/statusbar.vue";
import lianBian from "./components/pie/lianBian.vue";
import vRing from "./components/pie/ring.vue";
import cityMap from "./components/map/cityMap.vue";
import mapLine from "./components/map/mapLine.vue";
import chinaMap from "./components/map/chinaMap.vue";
import linemore from "./components/line/linemore.vue";
import waterthr from "./components/water/waterthr.vue";
import waterfour from "./components/water/waterfour.vue";
import waterfive from "./components/water/waterfive.vue";
import watersix from "./components/water/watersix.vue";
import Morecolor from "./components/bar/morecolor.vue";
import shock from "./components/bar/shock.vue";
import crack from "./components/line/crack.vue";
import lineone from "./components/line/lineone.vue";
import linetwo from "./components/line/linetwo.vue";
import linethree from "./components/line/linethree.vue";
import fxpg from "./components/line/fxpg.vue";
import fxpm from "./components/line/fxpm.vue";
import gradpeopleDimen from "./components/bar/gradpeopleDimen.vue";
import moreBar from "./components/bar/moreBar.vue";
import hierarchy from "./components/bar/hierarchy.vue";
import customBackground from "./components/instrumentPanel/customBackground.vue";
import jsc from "./components/jsc/index.vue";
import lineChart from "./components/line/lineChart.vue";
import barumbel from "./components/bar/barumbel.vue";
import barHet from './components/bar/barHet.vue'
export default {
  components: {
    // 柱状图
    barGraph,
    morecolor,
    hengBar,
    barThreed,
    shock,
    moreBar,
    hierarchy,
    gjsbar,
    gjsfxyj,
    gjsbarzx,
    barumbel,
    gradpeopleDimen,
    barHet,
    // 水球
    noBorder,
    waterthr,
    waterfour,
    waterfive,
    watersix,
    // 饼图
    pieLeft,
    statusbar,
    pieRose,
    lianBian,
    vRing,
    gjsthr,
    gjsthrdouble,
    // 地图
    cityMap,
    chinaMap,
    mapLine,
    // 折线
    linemore,
    Morecolor,
    crack,
    lineone,
    linetwo,
    linethree,
    lineChart,
    // 仪表盘
    customBackground,
    fxpg,
    fxpm,
  },
  data() {
    return {
      activeName: "1",
      activeNum: "1",
    };
  },
  methods: {
    handleClick(tab, event) {
      this.activeNum = tab.name;
    },
  },
};
</script>

<style scoped>
.list_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  height: 62vh;
}

.list_item {
  display: inline-block;
  width: 30%;
  height: 350px;
  box-shadow: 0 0px 5px #1a9be6;
  border: #1a9be6 1px solid;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.describe {
  height: 100px;
  box-shadow: 0px 0px 5px #1a9be6;
  border-top: #1a9be6 1px solid;
  padding-top: 10px;
}

.describe_title {
  width: 100%;
  margin-left: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
  /* 直接将英文变成大写 */
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  line-height: 1;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
  position: relative;
}

.describe_title:after {
  display: block;
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
  bottom: 0;
}

.describe {
  width: 98%;
  margin-top: 0;
  margin-left: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.describe_item {
  height: 60px;
  overflow-y: auto;
}

.describe_item li {
  margin-left: 1rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

.water_item {
  width: 18%;
}

.path {
  height: 50px;
  line-height: 25px;
  white-space: wrap;
  font-size: 16px;
  padding: 0 10px;
  color: #333;
  background-color: #6ab7be;
}

.echarts_box {
  height: 300px;
}
</style>